<template>
  <div class="common-layout">
    <el-container direction="vertical">
      <el-header>
        <Header></Header>
      </el-header>
      <el-main>
        <Main></Main>
      </el-main>
      <el-footer>
        <Footer></Footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import Header from "./my-header.vue";
import Main from "./my-main.vue";
import Footer from "./my-footer.vue";
import { io } from "socket.io-client";
import { ref, onMounted } from "vue";
// Socket.IO 连接
const socket = io("http://your-socket-server-url"); // 替换为你的 Socket 服务器 URL

// 监听连接事件
onMounted(() => {
  socket.on("connect", () => {
    console.log("Socket connected:", socket.id);
  });

  // 监听其他事件
  socket.on("message", (data) => {
    console.log("Message from server:", data);
  });
  // 监听断开连接事件
  socket.on("disconnect", (reason) => {
    console.log("Socket disconnected:", reason);
  });
  // 监听重连事件
  socket.on("reconnect", (attemptNumber) => {
    console.log("Reconnected after", attemptNumber, "attempts");
  });

  // 清理连接
  return () => {
    socket.disconnect();
  };
});
</script>

<style scoped lang="scss">
body {
  font-family: "Source Sans Pro", sans-serif;
}
.wrapper {
  padding: 10px 10px;
}
</style>
